<template>
    <div>

        <cu-navbar>
            <block slot="content">预约</block>
        </cu-navbar>

        <view class="yuyue-page page">
            <div class="tabs">
                <u-tabs  active-color="#FF2E26" inactive-color='#888' :list="tabsList" :current="currentIndex" @change="clickTab" ></u-tabs>
            </div>
            <u-empty
                v-if="!list.length"
                mode="list"
            />
            <div class="list">
                <div class="item f-r a-c j-b" v-for="(item,index) in list" :key="index">
                    <div class="f-g" style="height: 100%;">
                        <div class="name">{{ item.name }}</div>
                        <div class="date">{{ item.date }}</div>
                    </div>
                    <div v-if="item.shop_weight === 1" style="padding: 0 10px;flex-grow: 1">
                      可抢（{{ item.notices }}）酒
                    </div>
                    <div v-if="item.shop_weight === 0" class="button" @click="yuyue(item)">预约</div>
                    <div v-if="item.shop_weight === 1" class="button button2">已预约</div>
                </div>
            </div>
        </view>
    </div>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [
					{ name: '利铭利众商城' }
				],
				list: [],
				currentIndex: 0
			}
		},
		onLoad() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}
      this.getList()
		},
		methods: {
			clickTab(e) {
          this.currentIndex = e
				this.getList()
			},
        getList() {
            this.$api.jingpai_list(this.currentIndex).then(res => {
                this.list = res.result.map(el => {
                    return {
                        shop_id: el.shop_id,
                        name: el.companyName,
                        date: el.yuyue_time,
                        ...el
                    }
                })
            })
        },
			yuyue(row) {
				this.$api.yuyue(row.shop_id).then(res => {
					if (res.code === 1) {
						this.$common.successToShow('预约成功')
						this.clickTab({ index: this.currentIndex})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.yuyue-page {
	.tabs {
		width: 100%;
		background-color: #fff;

		.u-tabs__wrapper__nav__item  {
			flex: 1 !important;
		}
	}
	.list {
		padding: 0 20rpx;
		.item {
			    padding: 30rpx;
			    background: #fff;
			    border-radius: 4px;
				margin-top: 20rpx;
			.name {
				font-size: 32rpx;
			}
			.date,
			.price {
				font-size: 24rpx;
				color: #888;
				line-height: 64rpx;
			}
			.button {
				width: 120rpx;
				height: 54rpx;
				line-height: 54rpx;
				background: #ff443b;
				border-radius: 4px;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
			}
        .button2 {
            background: #999999;
        }
		}
	}
}
</style>
